<template>
    <div class="tab-menu">
        <van-nav-bar
                title="业务中心"
                left-text="返回"
                left-arrow
                border
                fixed
                @click-left="$router.go(-1)"
        />
        <div style="height:50px"></div>
        <div class="tab-box">
            <div @click="goUrl(index)" v-for="(item, index) in routerArr" :class="routerIndex == index?'avtice-tab':''" :key="index">
                <div v-if="item.show">
                    {{item.name}}
                </div>
            </div>
        </div>
        <router-view></router-view>
        <div style="height: 10vh;"></div>
<!--        <footer-item></footer-item>-->
    </div>
</template>

<script>
import footerItem from '@/components/footer.vue'

export default {
    name: "tabMenu",
    data() {
        return {
            routerArr: [
                {
                    name: '保险',
                    routerUrl: '/business/insurance?index=0',
                    show: false,
                },
                {
                    name: '教育',
                    routerUrl: '/business/education?index=1',
                    show: false,
                },
                {
                    name: '财税',
                    routerUrl: '/business/finance?index=2',
                    show: false,
                },
                {
                    name: '人力资源',
                    routerUrl: '/business/human?index=3',
                    show: false,
                },
                {
                    name: '咨询类',
                    routerUrl: '/business/consulting?index=4',
                    show: false,
                },
                {
                    name: '企业服务',
                    routerUrl: '/business/enterpriseService?index=5',
                    show: false,
                },
            ],
            routerIndex: 0,
            menuList: [
                'Business/insurance',   // 业务中心 -> 保险
                'Business/edu',         // 业务中心 -> 教育
                'Business/finance',     // 教育中心 -> 财税
                'Business/hr',          // 业务中心 -> 人力资源
                'Business/advisory',    // 财务中心 -> 咨询类
                'Business/service',     // 财务中心 -> 企业服务类
            ],
        }
    },
    components: {
        footerItem,
    },
    methods: {
        goUrl(index) {
            // if (index == 1  || index == 4  || index == 5) {
            //     this.$dialog.alert({
            //         title: '提示',
            //         message: '此功能正在开发中敬请期待~'
            //     }).then(() => {
            //         // on close
            //     });
            //     return
            // }
            if (this.routerIndex == index) {
                return;
            }
            this.routerIndex = index
            this.$router.replace(this.routerArr[index].routerUrl)
        }
    },
    created() {
        if (this.$route.query.index) {
            this.routerIndex = this.$route.query.index
        } else {
            this.routerIndex = 0
        }
        this.routerArr.map((item, index) => {
            let menu = this.menuList[index]
            item.show = this.$queryMenu(menu)
        })

    },
}
</script>

<style scoped lang="less">
// .tab-wrap {
//     /*width: 100vw;*/
//     /*overflow: hidden;*/
// }

.tab-box {
    background: #fff;
    border-bottom: 5px solid #f5f5f5;
    box-sizing: border-box;
    font-size: 11px;
    width: 100%;
    white-space: nowrap;
    overflow-x: auto;
    padding: 0 5px;

    > div {
        display: inline-block;
        > div {
            padding: 9px 16px;
            font-size: 12px;
            margin: 8px 1px;
            white-space: nowrap;
            border-radius: 5px;
            border: solid 1px #c8c8c8;
            box-sizing: border-box;
            color: #666;
            display: inline-block;
        }
    }

    .avtice-tab {
        div {
            color: #fff;
            background: #366cb3;
            border: none;
        }
    }
}
</style>